<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 
          拖拽事件 需要先给标签设置为可拖拽
    draggable = "true"
    img标签默认为可拖拽 
-->
    <img draggable="false"
        src="https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/33428/39/16450/106681/6311cad7Ef9b3d856/f10720b7f8f38937.jpg!cr_1053x420_4_0!q70.jpg"
        alt="">
    <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/3230/40/20384/44107/62daf2d9E5c5e0e55/03ab360c40ddc266.jpg!cr_1125x449_0_166!q70.jpg"
        alt="">
    <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/110775/22/28940/94917/62e5bc6dE569b2244/5d14fc9f06d87341.jpg!cr_1125x449_0_166!q70.jpg"
        alt="">
    <script>
        var imgs = document.images;
        for (let i = 0; i < imgs.length; i++) {
            // 阻止默认事件 可以阻止浏览器在请窗口打开图片
            // 先个标签添加可拖拽属性，才可以触发拖拽事件
            imgs[i].draggable = true;
            imgs[i].ondragstart = function (e) {
                console.log("开始拖拽了",e.target);
            }
            imgs[i].ondragenter = function (e) {
                console.log("拖拽到其它元素上",e.target);
            }
            imgs[i].ondragover = function (e) {
                console.log("在其他元素上移动了",e.target);
            }
            imgs[i].ondragleave = function (e) {
                console.log("移除其它元素",e.target);
            }
            imgs[i].ondragend = function (e) {
                console.log("拖拽结束了",e.target);
            }
            imgs[i].ondrop = function () {
                console.log("拖拽松分开");
            }
        }
    </script>
</body>

</html>